{include file='common/head'}
<div style="overflow-x: hidden;width: 96%;margin: auto;padding-top: 1rem;">
    <blockquote class="layui-elem-quote layui-text">
        <div class="demoTable layui-form">
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入角色名称" name="name" class="layui-input">
            </div>
            <!--<div class="layui-input-inline">-->
                <!--<select name="bank_id"  lay-search>-->
                    <!--<option value="">筛选所属银行</option>-->

                <!--</select>-->
            <!--</div>-->
            <button class="layui-btn " data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button class="layui-btn addInfo" style="margin:0;"><i class="layui-icon">&#xe654;</i> 添加</button>
        </div>
    </blockquote>
    <div class="demoTable layui-for">
        <table class="layui-table" lay-data="{height: 'full-100', url:'{:url('admin/Role/get')}', page:true,id:'tableId',loading:true}" lay-filter="tableFilter">
            <thead>
            <tr>
                <th lay-data="{field:'id',width:100,fixed: true}">编号</th>
                <th lay-data="{field:'name',width:200, fixed: true,templet:'#remb'}">角色名称</th>
                <th lay-data="{field:'desc',width:300,}">备注</th>
                <th lay-data="{field:'status',width:300, templet: '#status'}">状态</th>
                <th lay-data="{fixed: 'is_hot', width:300,fixed: 'right', toolbar: '#barDemo'}">操作</th>
            </tr>
            </thead>
        </table>

        <!--操作功能-->
        <script type="text/html" id="barDemo">
            <a title="编辑" lay-event="edit" href="#"><i class="layui-icon" style="font-size: 25px; color:#029587;line-height: 30px">&#xe642;</i></a>&nbsp;&nbsp;
            <a title="权限配置" lay-event="roleConfig" href="#"><i class="layui-icon" style="font-size: 25px; color:#029587;line-height: 30px">&#xe614;</i></a>
        </script>

        <!--列-自定义-->
        <script type="text/html" id="status">
            {{#  if(d.status == 1){ }}
            <span style="color: #5FB878" >正常</span>
            {{#  }else{ }}
            <span style="color: #FF5722" >禁用</span>
            {{#  } }}
        </script>
        <script type="text/html" id="remb">
            <span style="color: #FF5722">{{d.name}}</span>
        </script>
    </div>
    {include file='common/footer'}

    <script>
        layui.use(['table','form'], function(){
            var table = layui.table
                ,form = layui.form;
            //搜索提交
            var $ = layui.$, active = {
                reload: function(){
                    var name = $('input[name="name"]').val();
                    //执行重载
                    table.reload('tableId', {
                        where: {
                            name:name,
                        }
                    });
                }
            };
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听表格复选框选择
            table.on('checkbox(tableFilter)', function(obj){
                console.log(obj)
            });

            //表格功能
            table.on('tool(tableFilter)', function(obj){
                var data = obj.data;
                var event=obj.event;
                switch(event){
                    case 'edit':
                        layer.open({
                            type: 2,
                            title: '编辑更新数据信息',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['100%', '100%'],
                            content: '{:url("admin/Role/saveRoleInfo")}?id='+data.id,
                            end: function () {
                                table.reload('tableId');
                            },
                        });
                        break;
                    case 'roleConfig':
                        layer.open({
                            type: 2,
                            title: '管理员角色权限配置',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['100%', '100%'],
                            content: '{:url("admin/Role/saveRoleConfigInfo")}?id='+data.id,
                            end: function () {
                                table.reload('tableId');
                            },
                        });
                        break;
                }
            });

//      添加信息 url跳转路径
            var url='{:url("admin/Role/saveRoleInfo")}';
            $('.addInfo').on('click', function() {
                layer.open({
                    type: 2,
                    title: '添加内容信息',
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['100%', '100%'],
                    content: url,
                    end: function () {
                        table.reload('tableId');
                    },
                });
            });
        });
    </script>
    </body>
    </html>